<template>
	<view class="cart">
		<!-- 导航栏 -->
		<nav-bar isBack title="确认收货"></nav-bar>

		<!-- 顶部操作栏 -->
		<view class="c_top">
			<!-- minusCartAll -->
			<view class="c_tTxt">共{{totalLength}}件家具</view>
		</view>

		<!-- 购物车 -->
		<view class="c_cart">
			<view class="c_cGroup" v-for="items in cart">
				<view class="c_cShop">
					<view class="c_cSelect" :class="{'active': items.select}" @tap="selectShop(items.courier_num)">
						<view class="c_csIcon">
							<image src="/static/mall/selected.png"></image>
						</view>
					</view>
					<view class="c_csName">{{items.send_name}}</view>
					<view class="wuliu">
						<text v-if="items.express_name">{{items.express_name}} | {{items.courier_num}}</text>
						<text v-else>到店自提</text>
						<text>发货时间:{{items.send_time |formatDate}}</text>
						</view>
				</view>
				<view class="c_cList">
					<view class="c_cItem" v-for="item in items.list">
						<view class="c_cSelect" :class="{'active': item.select}"
							@tap="selectGoods(items.courier_num, item.id)">
							<view class="c_csIcon">
								<image src="/static/mall/selected.png"></image>
							</view>
						</view>
						<view class="c_cImage" @click="toProduct(item.product_id)">
							<image :src="item.main_imgurl"></image>
						</view>
						<view class="shopInfo">
							<view class="top">
								<view class="tit omit-2">
									{{item.product_title}}
								</view>
								¥ {{item.price}}
							</view>
							<view class="spec">
								<view v-for="(attr_params,index) in item.attr_params" style="display: inline-block;">
									<text v-if="attr_params.attr_name">{{attr_params.attr_value}}</text>
									<text v-if="attr_params.key">{{attr_params.value}}</text>
								</view>
								<text style="float: right;">x{{item.num}}</text>
							</view>
						</view>

					</view>
				</view>
			</view>
		</view>

		<!-- 提交订单栏 -->
		<submit-bar class="c_submit">
			<view class="c_sLeft" slot="left">
				<view class="c_sSelect" :class="{'active': isAllSelect}" @tap="selectAll">
					<view class="c_ssFalse">
						<image src="/static/mall/Not_all.png"></image>
					</view>
					<view class="c_ssTrue">
						<image src="/static/mall/selected.png"></image>
					</view>
				</view>
				<view class="c_cTxt1">全选</view>
				<view class="c_cTxt2"></view>
			</view>
			<view class="c_sRight" slot="right" @click="toCartList">确认收货</view>
		</submit-bar>
	</view>
</template>

<script>
	import URL from '@/config/url.js'
	import navBar from '@/components/navBar/navBar.vue'
	import submitBar from '@/components/submitBar/submitBar.vue'
	import service_mall from '@/service/mall.js'

	export default {
		components: {
			navBar,
			submitBar
		},

		data() {
			return {
				cart: null,
				isAllSelect: false, // 是否全选中
				sumPrice: 0,
				sumCostPrice: 0,
				flag: false,
				order_code: '',
			}
		},
		onLoad(options) {
			this.$utils.getUrl()
			this.order_code = options.orderid
			this.getCartList()
		},
		computed: {
			totalLength() {
				if (this.cart && this.cart.length > 0) {
					let total = 0;
					this.cart.map(item1 => {
						if (item1.list && item1.list.length > 0) {
							total += item1.list.length
						}
					})
					return total
				} else {
					return 0
				}
			}
		},
		filters: {
			formatDate(value) {
				let date = new Date(parseInt(value) * 1000);
				let y = date.getFullYear();
				let m = date.getMonth() + 1;
				m = m < 10 ? "0" + m : m;
				let d = date.getDate();
				d = d < 10 ? "0" + d : d;
				let h = date.getHours();
				h = h < 10 ? "0" + h : h;
				let minute = date.getMinutes();
				let second = date.getSeconds();
				minute = minute < 10 ? "0" + minute : minute;
				second = second < 10 ? "0" + second : second;
				return y +"-" + m + "-" + d;
			}
		},
		methods: {
			toProduct(e) {
				uni.navigateTo({
					url: `/pages_mall/pages/mall/goods/goods?id=${e}`
				})
			},
			//获取收货商品列表
			getCartList() {
				service_mall.getreceivedList({
						order_id: this.order_code
					})
					.then(res => {
						if (res.code == 1) {
							this.cart = res.data.order_detail
							this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
						}
					})
			},
			// 选择订单
			selectShop(courier_num) {
				let cart = this.cart
				let shop = cart.find(val => val.courier_num == courier_num)
				// 全选or全不选
				shop.select = !shop.select
				shop.list.forEach(val => val.select = shop.select)
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				this.countPrice()       // 计算价格
			},

			// 选择商品
			selectGoods(courier_num, id) {
				let cart = this.cart
				let shop = cart.find(val => val.courier_num == courier_num)
				let goods = shop.list.find(v => v.id == id)
				// 选中or不选中
				goods.select = !goods.select
				// 判断该订单下商品是否已全选
				let flag = true
				shop.list.forEach(val => {
					if (!val.select) flag = false
				})
				if (shop.select != flag) shop.select = flag
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				this.countPrice()       // 计算价格
			},

			// 全选or全不选
			selectAll() {
				this.isAllSelect = !this.isAllSelect
				this.cart.forEach(val => {
					val.select = this.isAllSelect
					val.list.forEach(v => v.select = this.isAllSelect)
				})
				this.verifyAllSelect() // 验证是否所有店铺所有商品是否都已选中
				this.countPrice()       // 计算价格
			},

			// 验证所有商品是否全选
			verifyAllSelect() {
				let isAll = this.cart.find(val => !val.select) ? false : true
				if (this.isAllSelect != isAll) this.isAllSelect = isAll
			},
			// 计算价格
			countPrice() {
				let price = 0, costPrice = 0
				this.cart.forEach(val => {
					val.list.forEach(v => {
						if (v.select) {
							price = this.$utils.accAdd(price, this.$utils.accMul(v.num, v.price))
							costPrice = this.$utils.accAdd(costPrice, this.$utils.accMul(v.num, v.primary_price))
						}
					})
				})
				
				this.sumPrice = price
				this.sumCostPrice = costPrice
			},
			//去收货
			toCartList() {
				let that = this
				let ary = []
				this.cart.forEach(val => {
					val.list.forEach(v => {
						if (v.select) {
							ary.push(
								v.id
							)
						}
					})
				})
				uni.showModal({
					title: "提示！",
					content: "是否确认收货",
					success: function(i) {
						if (i.confirm) {
							service_mall.getupconfirm({
								id_lst: ary.join(),
								order_id: that.order_code,
							}).then(res => {
								if (res.code == 1) {
									uni.navigateTo({
										url: "/pages_mall/pages/mall/order/detail?orderid=" + that.order_code
									})
								}
							});
						}
					}
				});

			},
		}
	}
</script>

<style lang="scss" scoped>
	.cart {

		// 顶部操作栏
		.c_top {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 24rpx;
			padding-left: 36rpx;
			background: #fff;

			.c_tTxt {
				color: #787878;
			}

			.c_tBtn {
				height: 100%;
				padding: 0 32rpx;
				float: right;
			}
		}

		// 购物车
		.c_cart {
			padding-bottom: 136rpx;
			overflow: hidden;

			.c_cGroup {
				margin-top: 16rpx;
				background: #fff;
			}

			.c_cShop {
				height: 120rpx;
				padding-left: 112rpx;
				position: relative;
				display: flex;
				align-items: center;

				&::after {
					content: "";
					width: 100%;
					height: 1px;
					background: rgba(0, 0, 0, .08);
					position: absolute;
					bottom: 0;
					left: 0;
					transform: scaleY(.5);
				}

				.c_csInto {
					width: 122rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					color: #cbaf87;
					font-size: 22rpx;
					margin-top: -22rpx;
					border: 1px solid #e7dec8;
					border-radius: 22rpx;
					position: absolute;
					top: 50%;
					right: 32rpx;
				}

				.c_csLogo {
					width: 50rpx;
					height: 50rpx;
					margin-right: 16rpx;
					border-radius: 50%;
					background: #f6f7fb;
					overflow: hidden;
				}
			}

			.c_cItem {
				min-height: 252rpx;
				padding: 24rpx 24rpx 24rpx 112rpx;
				position: relative;

				&::after {
					content: "";
					width: 100%;
					height: 1px;
					background: rgba(0, 0, 0, .08);
					position: absolute;
					bottom: 0;
					left: 38rpx;
					right: 0;
					transform: scaleY(.5);
				}

				&:last-child::after {
					content: none;
				}

				.c_cImage {
					width: 150rpx;
					height: 150rpx;
					margin-right: 16rpx;
					border-radius: 4rpx;
					background: #f6f7fb;
					float: left;
				}

				.c_cCont {
					overflow: hidden;
				}

				.c_cName {
					height: 40rpx;
					line-height: 40rpx;
					color: #1a1c20;
				}

				.c_cSize {
					max-width: 100%;
					height: 44rpx;
					line-height: 44rpx;
					color: #939393;
					font-size: 24rpx;
					padding: 0 38rpx 0 14rpx;
					margin-top: 12rpx;
					border-radius: 4rpx;
					background: #f9f6f3;
					position: relative;
					display: inline-block;

					.c_csIcon {
						width: 32rpx;
						height: 32rpx;
						line-height: 32rpx;
						text-align: center;
						font-size: 22rpx;
						margin-top: -19.5rpx;
						position: absolute;
						top: 50%;
						right: 8rpx;
						transform: rotate(90deg);
					}
				}

				.c_cPrice {
					height: 44rpx;
					line-height: 44rpx;
					color: #ef5854;
					font-size: 20rpx;
					font-weight: bold;
					margin-top: 12rpx;

					&>text {
						font-size: 32rpx;
					}
				}

				.c_cPrice2 {
					color: #999;
					font-size: 20rpx;
					margin-top: 12rpx;

					&>text {
						font-size: 28rpx;
						text-decoration: line-through;
					}
				}

				.c_ccart_nums {
					height: 48rpx;
					position: absolute;
					bottom: 24rpx;
					right: 6rpx;
					display: flex;
				}

				.c_cncart_num {
					width: 72rpx;
					height: 48rpx;
					line-height: 48rpx;
					text-align: center;
					border-radius: 8rpx;
					background: #f6f7fb;
				}

				.c_cnMinus,
				.c_cnAdd {
					width: 72rpx;
					height: 48rpx;
					position: relative;
				}

				.c_cnMinus::before,
				.c_cnAdd::before,
				.c_cnAdd::after {
					content: "";
					width: 24rpx;
					height: 4rpx;
					border-radius: 4rpx;
					background: #333;
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.c_cnAdd::after {
					width: 4rpx;
					height: 24rpx;
				}
			}

			.c_cSelect {
				width: 108rpx;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;

				&.active .c_csIcon {
					border: none;
					background: #cbaf87;

					&>image {
						display: block;
					}
				}

				.c_csIcon {
					width: 36rpx;
					height: 36rpx;
					border: 1px solid rgba(0, 0, 0, .2);
					border-radius: 50%;

					&>image {
						display: none;
					}
				}
			}
		}

		.c_csName {
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
			width: 65%;
		}

		// 提交订单栏
		.c_submit {
			.c_sLeft {
				width: 100%;
				height: 100%;
				color: #fff;
				font-size: 26rpx;
				display: flex;
				align-items: center;

				.c_sSelect {
					width: 36rpx;
					height: 36rpx;
					margin: 0 12rpx 0 18rpx;

					&.active .c_ssTrue,
					.c_ssFalse {
						display: block;
					}

					&.active .c_ssFalse,
					.c_ssTrue {
						display: none;
					}

					.c_ssFalse,
					.c_ssTrue {
						width: 100%;
						height: 100%;
					}
				}

				.c_cTxt1 {
					padding-right: 24rpx;
				}

				.c_cTxt3 {
					font-size: 20rpx;
					padding-left: 4rpx;

					&>text {
						font-size: 28rpx;
					}
				}

				.c_cTxt4 {
					color: #939393;
					font-size: 16rpx;
					padding-left: 4rpx;

					&>text {
						text-decoration: line-through;
						font-size: 20rpx;
					}
				}
			}
		}

	}

	.shopInfo {
		width: 430rpx;
		margin-left: 24rpx;
		display: flex;
		flex-direction: column;

		.top {
			color: #505050;
			font: 400 26rpx/40rpx PingFang SC;

			.tit {
				width: 328rpx;
			}

			display: flex;
			justify-content: space-between;
		}

		.spec {
			margin-top: 40rpx;
			color: #A0A0A0;
			font: 400 22rpx/22rpx PingFang SC;
		}
	}

	.yprice {
		border: 1px #E9423E solid;
		display: inline-block;
		font-size: 16rpx;
		line-height: 30rpx;
		padding-right: 10rpx;
		color: #e9423e;
		margin-top: 10rpx;
		border-radius: 3rpx;

		i {
			display: inline-block;
			background: #E9423E;
			color: #fff;
			font-weight: normal;
			font-size: 16rpx;
			line-height: 34rpx;
			float: left;
			padding: 0 10rpx;
			margin-right: 5rpx;
		}

		text {
			font-size: 22rpx;
		}
	}

	.c_sRight {
		width: 100%;
		text-align: center;
		line-height: 60rpx;
	}
	.wuliu{
		text-align: right;
		    position: absolute;
		    right: 20rpx;
		    font-size: 24rpx;
		    top: 10rpx;
		    line-height: 50rpx;
		    color: #666;
		text{
			display: block;
		}
	}
</style>
